<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>margin.html</title>
<style type="text/css">
    body{
      background-image: url(./qingchun1.jpeg);
      background-size: cover;
      background-position:center;
      background-repeat:repeat-x;
      background-size: 100% 100%;
      background-attachment: fixed; /* 背景图片固定 */
      min-height: 100vh;
}
.one{
    border-style: double;
    float: center;
    border-color: brown; 
    height: 50px;
    width: 600px; 
}
.two{
    border-top-style: dotted;
    border-bottom-style: dotted;
    border-left-style: double;
    border-right-style: double; 
    float:left;
    border-color: darkkhaki;
    height: 50px;
    width: 600px;  
    
}
.three{
    border-top-style:dashed ;
    border-bottom-style: dashed;
    border-left-style: double;
    border-right-style: double;
    float:right ;
    text-align: right;
    border-color: aquamarine;
    height: 50px;
    width: 600px;
     
}
.four{
    padding: 5%;
    margin: 3%;
    width: 200px;
    height: 80px;
    background-color: #ccc;
    border: 8px solid #F00;
    }
</style>
</head>
<body>

<div class="one"><font color="white">青春扬帆起航</font>></div>>
<div class="bottom-container"></div>
    <div class="two"><font color="white">青春正当时</font></div>>
        <div class="three"><font color="white">青春努力！</font></div>>
<div class="four">以上边框颜色组成红绿灯</div>>
    </body>
    </html>   